<template>
  <div class="question-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="关键词" class="left-class">
        <el-input v-model="formInline.user" />
      </el-form-item>
      <el-form-item />
      <el-form-item class="right-button">
        <el-button @click="vacancy">清除</el-button>
        <el-button type="primary" @click="search()">搜索</el-button>
      </el-form-item>
      <el-alert
        :title="`目前数据一共有${total}条`"
        type="info"
        show-icon
        :closable="false"
      />
    </el-form>
    <el-table
      ref="form"
      class="tableData"
      :data="questions"
    >
      <el-table-column
        fixed
        prop="id"
        label="编号"
        width="127"
        align="center"
      />
      <el-table-column
        prop="name"
        label="题型"
        width="150"
        align="center"
      >
        <!-- 太难了 -->
        <template v-slot="scope">
          {{ questionType.find(item=>item.value === +scope.row.questionType).label }}
        </template>
      </el-table-column>
      <el-table-column
        prop="province"
        label="题目编号"
        width="200"
        align="center"
      >

        <template v-slot="scope">
          <div v-for="item in scope.row.questionIDs" :key="item.number">
            <a
              href="#"
              style="color:#09f"
              @click="show(item.id)"
            >{{ item.number }}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="180"
        align="center"
      />
      <el-table-column
        prop="totalSeconds"
        label="答题时间（s）"
        width="100"
        align="center"
      />
      <el-table-column
        prop="accuracyRate"
        label="正确率（%）"
        width="150"
        align="center"
      />
      <el-table-column
        prop="userName"
        label="录入人"
        width="100"
        align="center"
      />
      <el-table-column
        label="操作"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="small"
            @click="del(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="block" align="right">
      <span
        class="demonstration"
      />

      <el-pagination
        layout="  prev, pager, next,sizes, jumper"
        :page-size="requeParams.pagesize"
        :current-page="requeParams.page"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
      :data="questionInfo"
    >
      <el-col :span="6">【题型】：{{ myData.questionType | tx }}</el-col>
      <el-col :span="6">【编号】：{{ myData.id }}</el-col>
      <el-col :span="6">【难度】：{{ myData.difficulty | nd }}</el-col>
      <el-col :span="6">【标签】：{{ myData.tags }}</el-col>
      <el-col :span="6" class="tips">【学科】：{{ myData.subjectName }}</el-col>
      <el-col :span="6" class="tips">【目录】：{{ myData.directoryName }}</el-col>
      <el-col :span="12" class="tips">【方向】：{{ myData.direction }}</el-col>
      <el-col :span="24" class="tips">【题干】：<div style="color:blue" v-html="myData.question" /> </el-col>
      <div v-if="myData.questionType!==3">
        <el-col :span="24">
          <div style="padding-bottom:5px">{{ myData.questionType }} 选项：（以下选中的选项为正确答案）</div>
        </el-col>
        <div v-for="item in myData.options" :key="item.code" style="padding:8px 0">
          <el-radio v-if="myData.questionType==='1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
          <el-checkbox v-if="myData.questionType==='2'" :value="item.isRight?true:false">{{ item.title }}</el-checkbox>
        </div>
      </div>
      <el-col :span="24" class="tips">【参考答案】：
        <el-button type="danger" @click="video()">视频答案预览</el-button>
        <div v-show="play" class="video">
          <video ref="video" :src="myData.videoURL" controls />
        </div>
      </el-col>
      <el-col :span="24" class="tips">【答案解析】：<div style="display:inline-block" v-html="myData.answer" /></el-col>
      <el-col :span="24" class="tips">【题目备注】：{{ myData.remarks }}</el-col>

      <span slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="display">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import { randoms as questionList, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  filters: {
    nd(value) {
      if (value) return difficulty.find(item => item.value === +value).label
    },
    tx(value) {
      if (value) return questionType.find(item => item.value === +value).label
    }
  },
  data() {
    return {
      checked: true,
      // 难度
      difficulty,
      // 题型
      questionType,
      // 关键词
      formInline: {
        user: '',
        region: ''
      },
      total: 0,
      requeParams: {
        keyword: null,
        page: 1,
        pagesize: 20
      },
      questions: [],
      questionInfo: {},
      dialogVisible: false,
      myData: {},
      play: false
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    // 分页
    handleSizeChange(nm) {
      this.requeParams.pagesize = nm
      this.getList()
    },
    // 跳转页码
    handleCurrentChange(val) {
      this.requeParams.page = 1
      this.requeParams.page = val
      this.getList()
    },
    // 发送请求得到题组数据
    async getList() {
      const { data: questionsData } = await questionList(this.requeParams)
      this.questions = questionsData.items
      this.total = questionsData.counts
      // console.log(this.questions)
    },
    // 清除按钮
    vacancy() {
      this.formInline = {}
    },
    // 搜索按钮
    search() {
      this.requeParams.page = 1
      this.getList()
    },
    // 删除数据
    async del(id) {
      try {
        await this.$refs.form.$confirm('确认要删除吗', '提示', { type: 'warning' })
      } catch {
        return
      }
      await removeRandoms({ id: id.id })
      this.$message.success('删除成功')
      this.getList()
    },
    async show(id) {
      this.dialogVisible = true
      const res = await detail({ id })
      this.myData = res.data
      // console.log(this.myData)
    },
    video() {
      this.play = true
      this.$refs.video.play()
    },
    display() {
      this.play = false
      this.dialogVisible = false
      this.$refs.video.pause()
    }
  }
}
</script>

<style scoped lang='scss'>
.question-container {
  // padding: 0 10px;
 margin: 20px;
  background-color: #fff;
}
.tableData {
  margin-top: 20px;
}
.demo-form-inline {
  padding-top: 20px;
  // padding-left: 20px;

  position: relative;
}
// .right-button {
//   // position: absolute;
//   left: 100px;
// }
.tips {
  padding-top: 20px;
}
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
.left-class {
  padding-left: 30px;
}
</style>
